webpack-dev-server

一个轻量级的node.js express 服务器

安装错误处理

已经安装了 webpack-dev-server，但还是报错：
@multi main or Cannot resolve module 'webpack/hot/dev-server'

 解决方法：所有全局安装的模块都再次进行本地安装

启动

webpack-dev-server有两种启动模式：
　　1.iFrame：该模式下修改代码后会自动打包，但是浏览器不会自动刷新
　　2.inline：内联模式，该模式下修改代码后，webpack将自动打包并且刷新浏览器，让我们看到最终的修改效果

Hot Modules Replacemant (hmr模块热部署)

 
 我们的修改后的代码不仅可以自动打包，而且浏览器不用完全刷新，只需要异步刷新，加载修改后部分代码即可，加载完成效果会马上反应在页面效果上
       webpack-dev-server --inline --hot

Proxy

devServer.proxy 利用 http-proxy-middleware包进行 url 代理，

 proxy: {
    "/api": "http://localhost:3000"
}

所有请求到/api/users 都会被代理到 http://localhost:3000/api/users

另外一种情况就是，如果你在代理的url 中不需要 /api,可以去重写这个路径：

   proxy: {
     "/api": {
        target:'http://localhost:3000',
        pathRewrite:{"^api":""}
     } 
}

**后台服务运行在拥有无效证书的https 服务时，默认会被拒绝，
如果真正想去接收，就需要配置** secure:

   proxy: {
      "/api": {
          target:'https://other-server.example.com”，
          secure:false,
      }
}

下面的几种配置不是经常用到

有时候，我们不想去代理所有的请求，就可以依照指定的函数返回值，绕开代理
这个函数可以接收到三个参数，request,response 和代理配置，并且函数必须返回 false 或者一个服务url 来取代代理

比如，一个浏览器请求，你要返回一个html页面，同时对于一个api 请求就要去代理它，就可以设置如下的配置。

  proxy:{
        "/api": {
        target: "http://localhost:3000",
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          }
        }
      }
 }

如果要去代理多个路径到一个目标url下，就可以设置一个数组

   proxy:[{
    context:["/auth","/api"],
    target:'http://localhost:3000',
 }]

webpack-dev-server